<template>
	<!-- 房间管理页面布局 -->
	<view class="roomLayout">
		<view class="list" v-for="family in families" :key="family.id">
			<view class="family">
				<view class="name">{{family.familyName}}</view>
				<view class="description">{{family.information}}</view>
			</view>
			<view class="row">
				<view class="left">
					<view class="left2">房间名称</view>
					<view class="left3">房间描述</view>
				</view>
				<view class="right">
					<view class="righttext">管理操作</view>
				</view>
			</view>
			<view class="row" v-for="room in family.rooms" :key="room.id">
				<view class="left">
					<view class="left2">{{room.roomName}}</view>
					<view class="left2">{{room.information}}</view>
				</view>
				<view class="right">
					<button type="default" size="mini" @click="update(room.id)">修改</button>
					<button type="warn" size="mini" @click="roomRemove(room.id)">删除</button>
				</view>
			</view>
		</view>
		<!-- 修改房间 -->
		<view class="saveLayout" v-if="isUpdate">
			<uni-data-select placeholder="请选择所属家庭" :localdata="selectFamily" v-model="update_room.familyId" />
			<input placeholder="房间名称" v-model="update_room.roomName" />
			<input placeholder="房间描述" v-model="update_room.information" />
			<view class="button">
				<button @click="onUpdate">确定</button>
				<button @click="cancelUpdate">取消</button>
			</view>
		</view>
		<!-- 创建房间 -->
		<view class="saveLayout" v-if="isSave">
			<uni-data-select placeholder="请选择所属家庭" :localdata="selectFamily" v-model="new_room.familyId" />
			<input placeholder="请输入房间名称" v-model="new_room.roomName" />
			<input placeholder="请输入房间描述" v-model="new_room.information" />
			<view class="button">
				<button @click="onSave">确定</button>
				<button @click="cancelSave">取消</button>
			</view>
		</view>
		<button class="button" type="primary" @click="save" v-show="!isSave">创建房间</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app"; // 生命周期函数
	import { type Room } from "@/types/room";
	import { getStore } from "@/utils/getToken";
	import { createRoom, deleteRoom, updateRoom, readFamilyRooms, readRoom } from "@/services/sysRoomApi";

	/**
	 * 公共数据查询:查询房间数据,无法从familys.value中直接获取room数据
	 * 根据 user_id 查询房间数据,后端做多表查询
	 * 生命周期 onShow 时调用一次,创建新room后调用一次
	 */
	let roomList = ref<Room[]>([]);
	function getRooms() {
		readRoom(getStore('id')).then(res => {
			roomList.value = res
		})
	}

	/**
	 * 公共数据获得:获取familyId选择的列表
	 * 创建房间和修改房间时使用
	 */
	let selectFamily = ref()                            // 创建room时,需要定义family_id,由下拉选择框选择
	function getSelectFamilyList() {
		selectFamily.value = families.value.map(item => { // 点击创建时,获取selectFamily下拉框渲染数据
			return {
				value: item.id,
				text: item.familyName
			}
		})
	}

	/**
	 * 新增房间
	 * 1. 点击创建房间显示创建页面
	 * 2. 创建房间时，必须填入房间名称和房间描述，家庭id由下拉选择器获取
	 * 3. 创建完成后，刷新ref数据
	 */
	let isSave = ref(false)
	let new_room = ref<Room>({                          // 渲染前必须先初始化
		familyId: 0,                                      // 数据由下拉选择器更新
		roomName: '',
		information: ''
	})
	function save() {                                   // 打开创建窗口点击事件函数
		getSelectFamilyList()                             // 获取下拉框数据
		isSave.value = true
	}
	function cancelSave() {
		isSave.value = false
	}
	function onSave() {
		if (new_room.value.familyId == 0) {
			uni.showToast({
				title: "请选择家庭"
			})
		} else {
			createRoom(new_room.value).then(res => {
				uni.showToast({
					title: res
				})
				getFamilyRooms()                                // 创建成功后刷新数据
				getRooms()
				isSave.value = false
				new_room.value.familyId = 0
				new_room.value.roomName = ''
				new_room.value.information = ''
			})
		}
	}

	/**
	 * 逻辑删除房间
	 * 根据id删除，返回统一的Result.msg
	 * 删除后刷新数据
	 */
	function roomRemove(id : number) {                  // 删除数据点击事件函数
		uni.showModal({
			title: "是否确认删除?",
			content: "本删除为逻辑删除",
			cancelColor: "#999",
			confirmColor: "#ff0000",
			success: function (res) {
				if (res.confirm) {
					deleteRoom(id).then(res => {
						uni.showToast({                           // 弹出结果
							title: res
						})
						getFamilyRooms()                          // 删除成功后刷新数据
					})
				}
			}
		})
	}
	/**
	 * 修改房间信息
	 * 1. 点击修改按钮显示修改界面，显示当前数据,修改数据单独查询 sys_room 表,并根据id返回
	 * 2. 取消修改的方法，关闭界面，刷新数据
	 * 3. 修改，只允许修改房间名称和房间描述
	 */
	let isUpdate = ref(false);
	let update_room = ref<Room>({                       // 渲染前必须先初始化
		familyId: 0,
		roomName: '',
		information: ''
	})
	function update(roomId : number) {
		getSelectFamilyList()                             // 获取下拉框数据 
		isUpdate.value = true
		update_room.value = roomList.value.find(item => item.id === roomId)  // 从数组对象中找到id匹配的数据
	}
	function cancelUpdate() {
		isUpdate.value = false
		getFamilyRooms()                                  // 取消时,刷新数据,以防止模版层数据被篡改
	}
	function onUpdate() {
		updateRoom(update_room.value).then(res => {
			uni.showToast({
				title: res.data
			})
			isUpdate.value = false
			getFamilyRooms()                                // 更新后刷新数据
		})
	}

	/**
	 * 查询家庭数据
	 * 1. 根据sys_user_id查询sys_family表,id数据来自登陆后的token
	 * 2. 根据sys_family表中的的family_id查询room表,返回
	 */
	let families = ref([])                              // famils_rooms数据,用于模版层2层v-for遍历
	function getFamilyRooms() {
		readFamilyRooms(getStore('id')).then(res => {
			families.value = res
		})
	}

	onShow(() => {                                     	// 生命周期
		getRooms()                                        // 获取基础数据
		getFamilyRooms()
	})
</script>

<style lang="scss" scoped>
	.roomLayout {
		.list {
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fafafa;

			.family {
				display: flex;
				justify-content: space-between; // 左右两端对齐
				height: 100rpx;
				margin: auto 40rpx;
				align-items: center;

				.name {
					display: inline;
					vertical-align: bottom;
					font-size: 38rpx;
					color: #761f31; // 字体颜色
				}

				.description {
					display: inline;
					vertical-align: bottom;
					font-size: 30rpx;
					color: #666; // 字体颜色
				}
			}

			.row {
				width: 710rpx;
				margin: 10rpx auto; // 两个参数 上下/左右
				display: flex; // 一个row里面带了2个view，布局方式:弹性布局
				justify-content: space-between; // 左右两端对齐
				height: 100rpx;
				border-top: 1px solid#eee;
				border-radius: 15rpx;
				display: flex; // 弹性布局
				align-items: center; // 垂直居中
				text-align: center; // 文字水平居中
				font-size: 28rpx; // 字体大小
				color: #333; // 字体颜色
				background-color: #eaeaea;

				.left {
					display: flex; // 弹性布局
					padding-left: 5rpx; // 内边距

					.left1 {
						width: 60rpx;
					}

					.left2 {
						width: 180rpx;
					}

					.left3 {
						width: 200rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					padding-right: 5rpx;

					.righttext {
						margin-right: 60rpx;
					}

					button {
						margin-right: 10rpx;
					}
				}
			}
		}

		.button {
			margin: 40rpx 120rpx; //两个参数 上下/左右
			height: 80rpx;
		}

		.saveLayout {
			position: fixed; // 显示在屏幕的固定位置,并不随屏幕滚动
			top: 700rpx; // 距离屏幕顶部的距离
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fff; // 添加背景色,并且不透明

			input {
				margin: 40rpx 20rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				height: 80rpx;
				box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
				border: 1rpx solid #ccc; // 边框宽度/颜色
				border-radius: 20rpx; // 圆角
			}

			.button {
				display: flex; // 弹性布局
				justify-content: center; // 垂直居中
				align-items: center;
				margin: 50rpx;
			}
		}
	}
</style>